<template>
  <div class="announcement-page">
    <div class="announcement-container">
      <div class="announcement-header">
        <div class="header-banner">
          <span class="announcement-tag">公告</span>
          <h1 class="title">{{ announcement.title }}</h1>
        </div>

        <div class="announcement-meta">
          <div class="meta-item">
            <i class="el-icon-user"></i>
            <span>{{ announcement.publisher }}</span>
          </div>
          <div class="meta-item">
            <i class="el-icon-time"></i>
            <span>{{ announcement.publishTime }}</span>
          </div>
          <div class="meta-item">
            <i class="el-icon-view"></i>
            <span>{{ viewCount }}次浏览</span>
          </div>
        </div>
      </div>
      
      <el-divider>
        <i class="el-icon-document"></i>
      </el-divider>
      
      <div class="announcement-content-wrapper">
        <div class="content-sidebar">
          <div class="sidebar-item">
            <i class="el-icon-share"></i>
            <span>分享</span>
          </div>
          <div class="sidebar-item">
            <i class="el-icon-star-off"></i>
            <span>收藏</span>
          </div>
          <div class="sidebar-item">
            <i class="el-icon-printer"></i>
            <span>打印</span>
          </div>
        </div>
        
        <div class="announcement-content">
          <div class="content-summary" v-if="announcement.summary">
            {{ announcement.summary }}
          </div>
          <p>{{ announcement.content }}</p>
          
          <div class="content-attachments" v-if="announcement.attachments && announcement.attachments.length > 0">
            <h3><i class="el-icon-paperclip"></i> 附件</h3>
            <div class="attachment-list">
              <div v-for="(attachment, index) in announcement.attachments" :key="index" class="attachment-item">
                <i class="el-icon-document"></i>
                <span class="attachment-name">{{ attachment.name }}</span>
                <span class="attachment-size">{{ attachment.size }}</span>
                <i class="el-icon-download"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="announcement-footer">
        <div class="related-announcements" v-if="relatedAnnouncements.length > 0">
          <h3>相关公告</h3>
          <div class="related-list">
            <div v-for="(item, index) in relatedAnnouncements" :key="index" class="related-item">
              <i class="el-icon-document"></i>
              <span>{{ item.title }}</span>
              <span class="related-date">{{ item.date }}</span>
            </div>
          </div>
        </div>
        
        <el-button icon="el-icon-back" plain @click="$router.go(-1)">返回列表</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Announcement',
  data() {
    return {
      viewCount: 256, // 模拟数据
      announcement: {
        title: '公告标题',
        publisher: '发布者名称',
        content: '公告内容',
        publishTime: '年月日',
        summary: '这是一份重要的学院公告，请所有师生认真阅读并按照要求执行。',
        attachments: [
          { name: '附件1.pdf', size: '1.2MB' },
          { name: '附件2.doc', size: '568KB' }
        ]
      },
      relatedAnnouncements: [
        { title: '关于期末考试安排的通知', date: '2023-12-15' },
        { title: '关于寒假放假时间的公告', date: '2023-12-20' }
      ]
    };
  }
};
</script>

<style scoped>
.announcement-page {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 40px 20px;
}

.announcement-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.announcement-header {
  background-color: #fff;
  border-radius: 12px 12px 0 0;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.header-banner {
  position: relative;
  margin-bottom: 25px;
}

.announcement-tag {
  display: inline-block;
  background: #409EFF;
  color: white;
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.title {
  font-size: 32px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 20px;
  line-height: 1.4;
}

.announcement-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  font-size: 14px;
  color: #606266;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-item i {
  margin-right: 8px;
  font-size: 16px;
  color: #909399;
}

.el-divider {
  margin: 0;
}

.el-divider >>> .el-divider__text {
  background-color: #f8f9fa;
  padding: 0 20px;
}

.announcement-content-wrapper {
  display: flex;
  background-color: #fff;
  padding: 0;
}

.content-sidebar {
  width: 60px;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #f0f0f0;
}

.sidebar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer;
  color: #606266;
  transition: all 0.2s;
}

.sidebar-item:hover {
  color: #409EFF;
}

.sidebar-item i {
  font-size: 20px;
  margin-bottom: 5px;
}

.sidebar-item span {
  font-size: 12px;
}

.announcement-content {
  flex: 1;
  padding: 30px;
  background: #fff;
  font-size: 16px;
  line-height: 1.8;
  color: #303133;
  min-height: 400px;
}

.content-summary {
  background-color: #f4f8fd;
  padding: 15px 20px;
  border-left: 4px solid #409EFF;
  margin-bottom: 25px;
  font-size: 15px;
  line-height: 1.6;
  color: #606266;
  border-radius: 0 4px 4px 0;
}

.content-attachments {
  margin-top: 40px;
  border-top: 1px dashed #e0e0e0;
  padding-top: 20px;
}

.content-attachments h3 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.content-attachments h3 i {
  margin-right: 8px;
  color: #909399;
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.attachment-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  transition: all 0.2s;
}

.attachment-item:hover {
  background-color: #ecf5ff;
}

.attachment-item i {
  margin-right: 10px;
  color: #909399;
}

.attachment-item .el-icon-download {
  margin-left: auto;
  color: #409EFF;
  cursor: pointer;
}

.attachment-name {
  flex: 1;
  font-size: 14px;
  color: #606266;
}

.attachment-size {
  font-size: 12px;
  color: #909399;
  margin: 0 15px;
}

.announcement-footer {
  background-color: #fff;
  border-radius: 0 0 12px 12px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.el-button {
  align-self: flex-end;
  margin-top: 30px;
}

.related-announcements {
  margin-bottom: 20px;
}

.related-announcements h3 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 15px;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.related-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed #e0e0e0;
  cursor: pointer;
}

.related-item:last-child {
  border-bottom: none;
}

.related-item i {
  margin-right: 10px;
  color: #909399;
}

.related-item span {
  flex: 1;
  color: #606266;
}

.related-item .related-date {
  flex: none;
  font-size: 13px;
  color: #909399;
}

.related-item:hover span:not(.related-date) {
  color: #409EFF;
}

@media (max-width: 768px) {
  .announcement-page {
    padding: 15px 10px;
  }
  
  .announcement-header,
  .announcement-content,
  .announcement-footer {
    padding: 20px;
  }
  
  .title {
    font-size: 24px;
    margin-bottom: 15px;
  }
  
  .announcement-meta {
    flex-direction: column;
    gap: 10px;
  }
  
  .announcement-content-wrapper {
    flex-direction: column;
  }
  
  .content-sidebar {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    padding: 15px 0;
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .sidebar-item {
    margin-bottom: 0;
    margin-right: 20px;
    flex-direction: row;
  }
  
  .sidebar-item i {
    margin-bottom: 0;
    margin-right: 5px;
  }
}
</style>
